<script setup lang="ts">
import {isNotEmptyArray} from "@/utils/common-fn";
import {MenuForRouter} from "@/api/sys/admin/menu/types";

defineProps<{
  route: MenuForRouter
}>()
</script>
<template v-if="!route.meta?.hidden">
  <el-sub-menu v-if="isNotEmptyArray(route.children)" :index="route.name">
    <template #title>
      <x-icon :name="route.meta?.icon"/>
      <span class="ml-2">{{ route.meta?.title }}</span>
    </template>
    <XMenu v-for="item in route.children" :key="item.name" :route="item"/>
  </el-sub-menu>
  <el-menu-item v-else :index="route.name">
    <template #title>
      <x-icon :name="route.meta?.icon"/>
      <span class="ml-2">{{ route.meta?.title }}</span>
    </template>
  </el-menu-item>
</template>
<style scoped lang="scss">
.el-menu {
  .el-menu-item {
    --el-menu-sub-item-height: 3em;
    --el-menu-item-height: 3em;
  }
}

:deep(.el-sub-menu__title ) {
  --el-menu-item-height: 3em;
}


</style>